<template>
  <div>
    <nav-bar name="反馈"></nav-bar>
    <div class="top">新建反馈</div>
    <div class="title"><input type="text" placeholder="请输入反馈标题" v-model="title"/></div>
    <div class="info"><input type="text" placeholder="请输入反馈内容" v-model="info" /></div>
    <div class="button" @click="btnClick">提交反馈</div>
  </div>
</template>

<script>
import navBar from "@/components/navbar";
export default {
    data() {
        return {
            title:'',
            info:''
        }
    },
  components: {
    navBar,
  },
   methods: {
         btnClick(){
      if(this.title.length==0){
          this.$msg.fail('请输入标题')
      }
      else if(this.info.lenght==0)
      {
          this.$msg.fail('请输入内容')
      }
      
      else{
             this.$Dialog.confirm({
  title: '确定反馈',
  message: '你是否确定进行反馈？',
}).then(()=>{
 this.$http.post('/message',JSON.stringify({
              id:localStorage.getItem('id'),
              title:this.title,
              info:this.info,
              date:new Date()
          })).then(
              res=>console.log(res.data.msg)
          )
})
         
      }
  }
   },
};
</script>
<style scoped>
.top {
  height: 40px;
  line-height: 60px;
}

.title input {
  width: 90%;
  height: 30px;
}
.info input {
  width: 90%;
  height: 300px;
}
.info input::-webkit-input-placeholder {
  /* WebKit browsers */

  color: #bababa;
  font-size: 30px;
}

.button {
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 25%;
  height: 60px;
  background-color: rgb(119, 223, 176);
  width: 50%;
  color: white;
  border-radius: 25px;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
</style>